//渲染页面
let shopS = document.querySelector('.shopS');
let cartall = document.querySelector('.cartall');
let savetall = document.querySelector('.savetall');

render(lists);

function render(goodLists){
    shopS.innerHTML = goodLists.map((item) =>{
    let saveTotal = item.num*(item.oriPrice - item.nowPrice);
    return `
        <tr class="shopList" idx='${item.id}'>
        <td class="imgTd"><img class="shops" src="../images/${item.img}" alt="" srcset=""></td>
        <td class="titleTd">
            <h6>${item.title}</h6>
            <span>ID:#${item.id}</span>
            <span>Size:${item.size}</span>
        </td>
        <td class="Son2">
            <span class="reduce">-</span>
            <input type="text" value="${item.num}" class="count">
            <span class="add">+</span>
        </td>
        <td class="Son3">
            <del class="oriPrice">${item.oriPrice}</del>
            <b class="nowPrice">${item.nowPrice}</b>
        </td>
        <td class="Son4">
            <span class="priceAll">${(item.nowPrice * item.num).toFixed(2)} py6</span><span>You save ${saveTotal.toFixed(2)} py6</span>
        </td>
        <td class="Son5">
            <img class="del" src="../images/del.png" alt="">
        </td>
        </tr>    
    `
    }).join('')

    // 计算总价
    let carTall = goodLists.reduce((pre,cur,index) => {
        return pre + cur.nowPrice * cur.num;
    },0)  
    cartall.firstElementChild.innerHTML = carTall.toFixed(2) + 'py6.';

    // 计算折扣总价
    let saveTall = goodLists.reduce((item,cur,index) => {
        return pre + cur.num * (cur.oriPrice - cur.nowPrice)
    },0)
    savetall.innerHTML = `Your Total Saving:${saveTall.toFixed(2)} py6.`
}
// 定义变量来接收 获取点击元素的父元素，和点击的商品id
let $tr,$id;

// 事件委托的形式绑定点击事件
let shop = document.querySelector('.shop');
shop.onclick = (e) => {
    switch(e.target.className){
        // 点击减数量
        case 'reduce':
            // 获取点击这个元素的父元素
            $tr = e.target.parentNode.parentNode;
            // 拿到父元素中存储的idx属性
            $id = $tr.getAttribute('idx');
            //通过这个idx属性去数据库里匹配数据，改数据
            lists.forEach(item => {
                // 如果 获取的id 和数组中对象对应的id一样的时候，更改这个条数据 num值
                // 并且数量不等于 1，只有大于1才能见减数量
                if(item.id == $id && item.num > 1){
                    item.num -= 1;
                    // 数据改变之后重新渲染页面
                    render(lists);
                }
            })
            break
        
        //点击加数据
        case 'add':
            $tr = e.target.parentNode.parentNode;
            $id = $tr.getAttribute('idx');
            lists.forEach(item => {
                if(item.id == $id){
                    item.num += 1;
                    render(lists);
                }
            })
            break
        
        //点击删除
        case 'del':
            let res = confirm('你确定删除吗');
            if(res){
                $tr = e.target.parentNode.parentNode;
                $id = $tr.getAttribute('idx');
                lists.forEach((item,index,array) => {
                    if(item.id == $id){
                        // 把当前点击的这个商品从数组中删除
                        array.splice(index,1)
                        render(lists);
                    }
                })
            }
            break

    }
}
